<template>
  <div id="todayBackground" style="background: #012239;overflow: auto;position: relative;">
    <div
      :style="{height:layoutHeight + 'px',width: this.layoutWidth + 'px'}">
      <pie-chart :property="property.pieProp" :pie-data="showData.pieData" @radioChanged="radioChanged"></pie-chart>
      <top-time-select :property="property.barProp" :params="params" @timeChanged="timeChanged"></top-time-select>
      <map-board :show-data="showData.mapData" :params="params" :property="property.mapProp"
                 ref="mapBoardRef" @changeView="changeView"></map-board>
      <line-chart :property="property.lineProp" :line-data="showData.lineData"
                  @radioChanged="radioChanged"></line-chart>
      <br/>
    </div>
  </div>
</template>
<script>
  import {
    getPointsInfo,
    getFreightTrainCountList,
    getFreightTrainWeightList,
    getFreightTrainCountTrend,
    getFreightTrainWeightTrend,
    getStationTrainCountList,
    getStationTrainWeightList,
    getStationTrainCountTrend,
    getStationTrainWeightTrend
  } from '@api/backEnd/todayBoard'
  import mapBoard from './components/mapBoard.vue'
  import pieChart from './components/pieChart.vue'
  import lineChart from './components/lineChart.vue'
  import topTimeSelect from './components/topTimeSelect.vue'
  import hw from '@components/common/heightAndWidth'
  import moment from 'moment'

  export default {
    name: 'todayBoard',
    data () {
      let params = {
        stationName: '',
        timeTip: '当月',
        timeVal: moment().format('YYYY-MM'),
        startTime: moment(moment().format('YYYY-MM')).format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment(moment().format('YYYY-MM')).add(1, 'M').subtract(1, 's').format('YYYY-MM-DD HH:mm:ss'),
        timeRange: [moment().subtract(+1, 'months').format('YYYY-MM') + '-00', moment().format('YYYY-MM') + '-00'] // 暂时不用
      }
      let showData = {
        mapData: {},
        pieData: {
          top: {
            data: {},
            radioVal: '到达'
          },
          btm: {
            data: {},
            radioVal: '到达'
          }
        },
        lineData: {
          top: {
            data: {},
            radioVal: '到达'
          },
          btm: {
            data: {},
            radioVal: '到达'
          }
        }
      }
      let property = {
        pieProp: {
          width: 0,
          height: 0
        },
        lineProp: {
          width: 0,
          height: 0
        },
        mapProp: {
          width: 0,
          height: 0
        },
        barProp: {
          top: 0,
          left: 0,
          width: 0,
          height: 0
        }
      }
      return {
        params,
        showData,
        getPointsInfo,
        layoutHeight: 0,
        layoutWidth: 0,
        property,
        getFreightTrainCountList,
        getFreightTrainWeightList,
        getFreightTrainCountTrend,
        getFreightTrainWeightTrend,
        getStationTrainCountList,
        getStationTrainWeightList,
        getStationTrainCountTrend,
        getStationTrainWeightTrend
      }
    },
    methods: {
      setSize () {
        hw.setFullHeightAllWith('firstLayout', 6, (height) => {
          this.layoutHeight = height - 99
        })
        this.layoutWidth = document.getElementById('firstLayout').offsetWidth
        if (this.layoutHeight < 650) {
          this.layoutHeight = 650
        }
        if (this.layoutWidth < 1400) {
          this.layoutWidth = 1400
        }
        if (this.layoutWidth >= 1600) {
          this.layoutWidth = this.layoutWidth - document.getElementById('siderBar').offsetWidth
        }
        this.layoutWidth = this.layoutWidth - 24
        this.layoutHeight = this.layoutHeight - 24
        this.layoutWidth = 1600
        this.layoutHeight = 800
      },
      timeChanged () {
        this.setPieTopDatas()
        this.setPieBtmDatas()
        this.setLineTopDatas()
        this.setLineBtmDatas()
        this.$refs.mapBoardRef.initMapBoard()
        this.setBoardDatas()
      },
      radioChanged (chartType, position) {
        console.log(this.params.stationName)
        if (chartType === 'pie') {
          if (position === 'top') {
            this.setPieTopDatas()
          } else {
            this.setPieBtmDatas()
          }
        } else {
          if (position === 'top') {
            this.setLineTopDatas()
          } else {
            this.setLineBtmDatas()
          }
        }
      },
      changeView (stationName) {
        this.params.stationName = stationName
        console.log(this.params.stationName)
        this.setPieTopDatas()
        this.setPieBtmDatas()
        this.setLineTopDatas()
        this.setLineBtmDatas()
      },
      setBoardDatas () {
        getPointsInfo().then(res => {
          if (res.data.isSuccess === 1) {
            this.showData.mapData = res.data.data
          }
        })
      },
      setPieTopDatas () {
        let value = 1
        if (this.showData.pieData.top.radioVal === '发出') {
          value = 2
        }
        let param = {
          startTime: this.params.startTime,
          endTime: this.params.endTime,
          inOrOut: value
        }
        if (this.params.stationName !== null && typeof this.params.stationName !== 'undefined' && this.params.stationName !== '') {
          param.freightName = this.params.stationName
          getStationTrainCountList(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({ value: data[key].sendCount, name: data[key].name })
              }
            }
            this.showData.pieData.top.data = formatData
          })
        } else {
          getFreightTrainCountList(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({ value: data[key].sendCount, name: data[key].name })
              }
            }
            this.showData.pieData.top.data = formatData
          })
        }
      },
      setPieBtmDatas () {
        let value = 1
        if (this.showData.pieData.btm.radioVal === '发出') {
          value = 2
        }
        let param = {
          startTime: this.params.startTime,
          endTime: this.params.endTime,
          inOrOut: value
        }
        if (this.params.stationName !== null && typeof this.params.stationName !== 'undefined' && this.params.stationName !== '') {
          param.freightName = this.params.stationName
          getStationTrainWeightList(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({ value: data[key].sendCount, name: data[key].name })
              }
            }
            this.showData.pieData.btm.data = formatData
          })
        } else {
          getFreightTrainWeightList(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({ value: data[key].sendCount, name: data[key].name })
              }
            }
            this.showData.pieData.btm.data = formatData
          })
        }
      },
      setLineTopDatas () {
        let value = 1
        if (this.showData.lineData.top.radioVal === '发出') {
          value = 2
        }
        let param = {
          startTime: this.params.startTime,
          endTime: this.params.endTime,
          inOrOut: value
        }
        if (this.params.stationName !== null && typeof this.params.stationName !== 'undefined' && this.params.stationName !== '') {
          param.freightName = this.params.stationName
          getStationTrainCountTrend(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({
                  data: data[key].sendCount,
                  name: data[key].name,
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  symbol: 'circle',
                  areaStyle: {
                    normal: {}
                  }
                })
              }
            }
            this.showData.lineData.top.data = formatData
          })
        } else {
          getFreightTrainCountTrend(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({
                  data: data[key].sendCount,
                  name: data[key].name,
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  symbol: 'circle',
                  areaStyle: {
                    normal: {}
                  }
                })
              }
            }
            this.showData.lineData.top.data = formatData
          })
        }
      },
      setLineBtmDatas () {
        let value = 1
        if (this.showData.lineData.btm.radioVal === '发出') {
          value = 2
        }
        let param = {
          startTime: this.params.startTime,
          endTime: this.params.endTime,
          inOrOut: value
        }
        if (this.params.stationName !== null && typeof this.params.stationName !== 'undefined' && this.params.stationName !== '') {
          param.freightName = this.params.stationName
          getStationTrainWeightTrend(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({
                  data: data[key].sendCount,
                  name: data[key].name,
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  symbol: 'circle',
                  areaStyle: {
                    normal: {}
                  }
                })
              }
            }
            this.showData.lineData.btm.data = formatData
          })
        } else {
          getFreightTrainWeightTrend(param).then(res => {
            let formatData = []
            if (res.data.isSuccess === 1) {
              let data = res.data.data
              for (let key in data) {
                formatData.push({
                  data: data[key].sendCount,
                  name: data[key].name,
                  type: 'line',
                  stack: '总量',
                  smooth: true,
                  symbol: 'circle',
                  areaStyle: {
                    normal: {}
                  }
                })
              }
            }
            this.showData.lineData.btm.data = formatData
          })
        }
      }
    },
    components: { mapBoard, pieChart, lineChart, topTimeSelect },
    mounted () {
      this.setSize()
      this.setBoardDatas()
      this.setPieTopDatas()
      this.setPieBtmDatas()
      this.setLineTopDatas()
      this.setLineBtmDatas()
    },
    watch: {
      'params.timeVal': function (val) {
        this.params.startTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
        this.params.endTime = moment(val).add(1, 'M').subtract(1, 's').format('YYYY-MM-DD HH:mm:ss')
      },
      layoutHeight: function (val) {
        this.property.pieProp.height = val - 24
        this.property.lineProp.height = val - 24
        this.property.mapProp.height = 458
        this.property.barProp.height = 40
        this.property.barProp.top = 40
      },
      layoutWidth: function (val) {
        this.property.mapProp.width = 589
        this.property.pieProp.width = (val - this.property.mapProp.width - 24) / 2
        this.property.lineProp.width = (val - this.property.mapProp.width - 24) / 2
        this.property.barProp.width = 589
        this.property.barProp.left = this.property.pieProp.width
      }
    }
  }
</script>
<style scoped>
</style>
